<template>
  <div class="flex-between-center" style="height:100%">
    <div class="flex-start-center">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
          <nuxt-link v-if="item.url" :to="item.url">
            {{ item.title }}
          </nuxt-link>
          <template v-else>
            {{ item.title }}
          </template>
        </a-breadcrumb-item>
      </a-breadcrumb>
      <!-- <div v-if="userInfo && userInfo.username">
        {{ userInfo.username }}
      </div> -->
      <!-- <div class="primary-color ml-md">
        7天后到期
      </div> -->
      <!-- <a-button type="link" style="color:red; margin-left:20px">
        7天后到期
      </a-button>

      <a-button class="ml-md" type="primary" size="small">
        立即续费
      </a-button> -->
    </div>
    <div class="flex-start-center">
      <!-- <div v-if="userInfo && userInfo.username">
        {{ userInfo.username }}
      </div> -->
      <StoreList class="margin-left-15" />
      <Selectlang class="margin-left-15" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Selectlang from './SelectLang'
import StoreList from './StoreList'
export default {
  components: {
    Selectlang,
    StoreList
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/userInfo',
      breadcrumb: 'menus/breadcrumb'
    })
  }
}
</script>
<style lang="less" scoped>
.gongsi {
  margin-right: 30px;
}
.top_nav {
  a {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #9a9a9a;
    &:last-of-type {
      color: #343434;
    }
  }
  a:hover {
    color: #1890ff;
  }
}
</style>
